<template>
  <div class="total-box">
    <div class="total-count">
      <div class="left-total">
        <p class="title">{{ objData.leftTitle }}</p>
        <p class="amount">{{ objData.allAmount ? objData.allAmount: 0 | formatNum }}<span>{{ objData.unit }}</span></p>
      </div>
    </div>
    <div class="total-count">
      <div class="left-total">
        <p class="title">{{ objData.rightTitle }}</p>
        <p class="amount">{{ objData.amount ? objData.amount: 0 | formatNum }} <span>{{ objData.unit }}</span></p>
      </div>
      <div class="ratio">
        <span class="left-name">环增</span>
        <div class="right-data">
          <span class="add">{{ priorPeriod.addAndSum }}</span>
          <span>{{ priorPeriod.contrast }}</span>
          <span>%</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import common from '../../assets/js/common.js'
export default {
  filters: {
    formatNum (value) {
      return common.formatNum(value)
    }
  },
  props: {
    objData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      leftTitle: '',
      rightTitle: '',
      addAndSum: '+',
      allAmount: '',
      amount: '',
      unit: '个',
      contrast: ''
    }
  },
  computed: {
    priorPeriod () {
      let contrast = 0
      let addAndSum = ''
      if (this.objData.priorPeriod) {
        if (this.objData.priorPeriod === 0) {
          contrast = 0
        } else {
          contrast = (this.objData.amount - this.objData.priorPeriod) / this.objData.priorPeriod
        }
      }

      if (contrast > 0 || contrast === 0) {
        addAndSum = '+'
      } else {
        contrast = Math.abs(contrast)
        addAndSum = '-'
      }
      contrast = (contrast * 100).toFixed(2)
      return {
        contrast,
        addAndSum
      }
    }
  },
  methods: {
    changeTitle (reciveData) {
      this.leftTitle = reciveData.leftTitle
      this.rightTitle = reciveData.rightTitle
      this.allAmount = common.formatNum(reciveData.allAmount)
      this.amount = common.formatNum(reciveData.amount)
      this.unit = reciveData.unit
      // 上期
      this.priorPeriod = reciveData.priorPeriod
      let contrast
      if (reciveData.priorPeriod === 0) {
        contrast = 0
      } else {
        contrast = (reciveData.amount - reciveData.priorPeriod) / reciveData.priorPeriod
      }

      if (contrast > 0 || contrast === 0) {
        this.addAndSum = '+'
      } else {
        contrast = Math.abs(contrast)
        this.addAndSum = '-'
      }
      this.contrast = (contrast * 100).toFixed(2)
    }
  }
}
</script>
<style lang="scss" scoped>
.total-box {
  border: 0.02rem solid #79c4ee;
  background: rgba(47, 60, 134, 0.5);

  .total-count {
    padding: 0.16rem;
    border-bottom: 1px dashed rgba(220, 218, 218, 0.5);
    &:last-of-type {
      border-bottom: 0;
    }
    .left-total {
      flex: 1;
      text-align: center;
      display: -webkit-flex;
      display: flex;
      p {
        line-height: 170%;
        &.title {
          font-size: 0.28rem;
          color: #65c4ea;
          text-align: left;
          flex: 1;
        }
        &.amount {
          font-size: 0.32rem;
          color: #fff;
          font-weight: 600;
          flex: 1;
          text-align: right;
          span {
            font-size: 0.24rem;
            font-weight: normal;
            color: #65c4ea;
          }
        }
      }
    }
    .ratio {
      font-size: 0.24rem;
      color: #65c4ea;
      text-align: right;
      display: -webkit-flex;
      display: flex;
      .left-name{
        flex:1;
        text-align: left;
      }
      .right-data {
        span:nth-child(2){
          color: #fff;
          font-weight: 600;
          font-size: .32rem;
        }
      }
      .add {
        color: #ff9800;
      }
    }
  }
}
</style>
